<template>
  <table class="my-table">
    <thead>
      <tr class="table_th">
        <th>城市</th>
        <th>{{ mapInd == 0 ? "供应套数" : mapInd == 1 ? "库存套数" : mapInd == 2 ? "销量套数" : "平均单价" }}</th>
        <th v-if="mapInd != 3">{{ mapInd == 0 ? "供应面积" : mapInd == 1 ? "库存面积" : mapInd == 2 ? "销量面积" : "" }}</th>
      </tr>
    </thead>
    <tbody>
      <vue3-seamless-scroll
        openWatch="true"
        :list="tableData"
        direction="up"
        :hover="true"
        :limitScrollNum="tableData.length"
        :step="step"
        class="seamless-warp"
      >
        <tr class="table_td" v-for="(item, index) in tableData" :key="index">
          <td>{{ item.regionName }}</td>
          <td>
            {{ item.num }}{{ mapInd == 3 ? "元" : "套" }} 同比:<span :class="Number(item.numtb) >= 0 ? 'cl-5c' : 'cl-c4'"
              >{{ Number(item.numtb) >= 0 ? "↑" : "↓" }}{{ item.numtb }}%</span
            >
            <!-- 环比:<span :class="Number(item.numhb) >= 0 ? 'cl-5c' : 'cl-c4'">{{ Number(item.numhb) >= 0 ? "↑" : "↓" }}{{ item.numhb }}%</span> -->
          </td>
          <td v-if="mapInd != 3">
            {{ item.area }}m² 同比:<span :class="Number(item.areatb) >= 0 ? 'cl-5c' : 'cl-c4'"
              >{{ Number(item.areatb) >= 0 ? "↑" : "↓" }}{{ item.areatb }}%</span
            >
            <!-- 环比:<span :class="Number(item.areahb) >= 0 ? 'cl-5c' : 'cl-c4'">{{ Number(item.areahb) >= 0 ? "↑" : "↓" }}{{ item.areahb }}%</span> -->
          </td>
        </tr>
      </vue3-seamless-scroll>
    </tbody>
  </table>
</template>

<script setup lang="ts">
import { ref, watchEffect, onMounted, onUnmounted } from "vue";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
import { pxToRem } from "@/utils/index";
// 接收参数
const mapInd = ref(0);
const tableData = ref<any>([]);
const step = ref(0);

const props = defineProps({
  housingSupplyStatsData: {
    type: Object,
    default: () => {},
  },
  mapInd: {
    type: Number,
    required: true,
  },
});

// 监听索引变化
watchEffect(() => {
  mapInd.value = props.mapInd;
  tableData.value = [];
  tableData.value = props.housingSupplyStatsData.list[mapInd.value];
});
const calculateStep = () => {
  // 获取视口的高度
  const viewportHeight = window.innerHeight;
  if (tableData.value.length > 5) {
    step.value = viewportHeight * 0.0003;
  }
};
onMounted(() => {
  calculateStep();
  window.addEventListener("resize", calculateStep);
});
onUnmounted(() => {
  window.removeEventListener("resize", calculateStep);
});
</script>

<style lang="less" scoped>
.my-table {
  position: relative;
}
.table_th {
  width: 587px;
  height: 33px;
  background: linear-gradient(180deg, #2586ee 0%, rgba(37, 134, 238, 0.6) 100%);
  position: absolute;
  z-index: 1;
  display: flex;
  color: #fff;
  align-items: center;
  font-size: 14px;
}
.table_th th:nth-child(1) {
  flex: 3; /* 宽度比例为1 */
}

.table_th th:nth-child(2),
.table_th th:nth-child(3) {
  flex: 4; /* 宽度比例为2 */
}
.table_td {
  display: flex;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  height: 30px;
  align-items: center;
  background: #092140;
}
.table_td td:nth-child(1) {
  text-align: center;
  flex: 3; /* 宽度比例为1 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table_td td:nth-child(2),
.table_td td:nth-child(3) {
  text-align: center;
  flex: 4; /* 宽度比例为2 */
}
.seamless-warp {
  height: 150px;
  overflow: hidden;
  margin-top: 30px;
}
.seamless-warp .table_td:nth-child(2n) {
  background: rgba(0, 0, 0, 0);
}
.seamless-warp .table_td:nth-last-child(1) {
  background: rgba(0, 0, 0, 0);
}
.cl-5c {
  color: #5cc40c;
}
.cl-c4 {
  color: #c41e0c;
}
</style>

